<template>
  <div>
    <div>【云端报警风险】</div>
    <div ref="target" class=" w-full h-full" ></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref,onMounted,watch } from 'vue';
const target = ref(null)
let myChart = null
const props = defineProps({
  data:{
    type:Object,
    required:true
  }
})
onMounted(()=>{
  myChart = echarts.init(target.value)
  renderChart()
})

watch(()=>props.data,()=>{
  renderChart()
})

const renderChart = () =>{
  const options = {
    //雷达图的坐标系配置
    radar:{
      name:{
        textStyle:{
          color:'#05D5FF',
          fontSize:14
        }
      },
      // 形状
      shape:"polygon",
      center:['50%','50%'],
      radius:'80%',
      startAngle:120,
      axisLine:{
        lineStyle:{
          color:'rgba(5,213,255, .8)'
        }
      },
      spitLine:{
        show:true,
        lineStyle:{
          width:1,
          color:'rgba(5,213,255, .8)'
        }
      },
      // 指示器
      indicator:props.data.risks.map(item=>{return{
        name:item.name,
        max:100
      }}),
      // 拆分区域
      splitArea:{
        show:false
      }
    },
    //坐标极点
    polar:{
      center:['50%','50%'],
      redius:'0%',
    },
    // 坐标角度
    angleAxis:{
      min:0,
      interval:5,
      clockwise:false
    },
    // 镜像轴
    radiusAxis:{
      min:0,
      interval:20,
      splitLine:{
        show:true
      }
    },
    // 图表核心配置
    series:{

    }
  }
  myChart.setOption(options)
}
</script>

<style lang="scss" scoped>

</style>